<template>
  <el-card id="expertList">
    <div class="container">
      <img class="avatar" v-bind:src="expert.img"/>
      <div class="right">
        <label>{{expert.name}}</label>
      </div>
      <el-menu class="el-menu-demo " :router="true" mode="horizontal">
        <el-menu-item index="1" route="/">介绍</el-menu-item>
        <el-menu-item index="2" style="margin-left: 2%" route="/message">文章</el-menu-item>
        <el-menu-item index="3" style="margin-left: 2%" route="/announcement">擅长领域</el-menu-item>
      </el-menu>
    </div>
  </el-card>
</template>
<script>
import expert from '@/api/expert'
export default {
  data() {
    return {
      expert: {}
    }
  },
  mounted() {
    let id = this.$route.query.id
    expert.profile(id).then(res => {
      console.log(res)
      this.expert = res.data
    });
  }
}
</script>
<style scoped>
  .container {
    display: flex;
    flex-direction: column;
  }
  .avatar {
    width: 176px;
    height: 176px;
  }
  .right {
    display: flex;
    flex-direction: column;
    align-items: start;
  }
</style>